<script setup lang="ts">
import useApply from './useApply'
import LabeledValue from '../components/LabeledValue.vue'

defineOptions({
  name: 'api-manage/apply',
})

const { isLoading, validationRules, attachments, formData, formRef, onSubmit } = useApply()
</script>

<template>
  <div class="space-y-2">
    <card v-loading="isLoading">
      <template #title>
        <span>接口信息</span>
      </template>
      <div class="space-y-2">
        <div class="flex justify-between">
          <p>
            接口地址：
            <span class="font-bold"> http://szgx.com/api/v2/listAll</span>
          </p>
          <p>接口状态：<span class="text-primary">已启用</span></p>
        </div>
        <p>接口描述：<span class="font-bold">列出所有接口</span></p>
        <el-row>
          <el-col :span="6">
            <labeled-value title="请求协议" value="HTTP/HTTPS" />
          </el-col>
          <el-col :span="6">
            <labeled-value title="请求方式" value="GET/POST" />
          </el-col>
          <el-col :span="6">
            <labeled-value title="编码格式" value="UTF-8" />
          </el-col>
          <el-col :span="6">
            <labeled-value title="返回格式" value="JSON" />
          </el-col>
        </el-row>
      </div>
    </card>
    <card>
      <template #title>
        <span>申请单填写</span>
        <!-- 表单内容 -->
      </template>
      <el-form
        ref="formRef"
        v-loading="isLoading"
        class="w-[520px]"
        label-width="200px"
        element-loading-text="加载中"
        :model="formData"
        :rules="validationRules"
      >
        <el-form-item label="申请单位" prop="deptName">
          <el-input v-model="formData.deptName" placeholder="请输入申请单位" />
        </el-form-item>
        <el-form-item label="申请人" prop="name">
          <el-input v-model="formData.name" placeholder="请输入申请人" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="联系地址" prop="address">
          <el-input v-model="formData.address" placeholder="请输入联系地址" />
        </el-form-item>
        <el-form-item label="联系邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入联系邮箱" />
        </el-form-item>
        <el-form-item label="使用场景" prop="scenario">
          <el-input
            v-model="formData.scenario"
            show-word-limit
            type="textarea"
            placeholder="请输入使用场景"
            resize="none"
            :rows="5"
            :maxlength="300"
          />
        </el-form-item>
        <el-form-item label="使用时间" prop="period">
          <el-date-picker
            v-model="formData.period"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="文件上传" prop="isFinished">
          <UploadFile v-model:fileBos="attachments" :limit="20" :max="100" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交申请</el-button>
          <el-button>返回</el-button>
        </el-form-item>
      </el-form>
    </card>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
</style>
